<template>
    <el-row :gutter="20">
      <el-col :span="16">
            <div class="flag">
                <span class="iconfont icon-C_round"></span>
                <span class="iconfont icon-A_round"></span>
                <span class="iconfont icon-Q_round"></span>
            </div>
          <i class="el-icon-arrow-left" style="margin: 0 20px 0 100px" @click="back"></i>
          <i class="el-icon-arrow-right" @click="forward"></i>
      </el-col>
      <el-col :span="8">
        <el-input placeholder="请输入内容" v-model="inputValue" @keyup.enter.native="toSearch()">
            <el-button slot="append" icon="el-icon-search" @click="toSearch()"></el-button>
        </el-input>
      </el-col>
  </el-row>
</template>

<script>
export default {
    name: 'TopPage',
    data() {
        return {
            inputValue: ''
        }
    },
    methods: {
        toSearch(){
            // 输入为空时禁止跳转
            if(this.inputValue === ''){
                this.$message.error('请输入内容')
            }else{
                console.log(this.inputValue)
                this.$router.push({name: 'result',query: {q: this.inputValue}})
                location.reload()
            }
        },
        back(){
            window.history.back()
        },
        forward(){
            window.history.forward()
        }
    }
}
</script>

<style lang="less" scoped>
.el-header{
    padding: 0;
}
.flag{
    margin-left: 40px;
    span{
        font-size: 30px;
    }
}
.el-row{
    background-color: #f9f9f9;
    height: 100%;
    width: 100vw;
    .el-col{
        height: 100%;
        display: flex;
        align-items: center;
    }
}
i{
    cursor: pointer;
}
</style>